<template>
  <div style="display: flex; flex-direction: column;">
    <div class="panel-title" style="margin-top:20px;">
      <span class="panel-title-text">任务分类</span>
      <button class="btn"  @click="onNewCategory" >+ 新分类</button>
    </div>
     <ul class="category-list">
        <li v-for="(item,index) in category_list" :key="item.id" @click="onOpenCategory(item)" >
          <span class="category-title">
            <span class="category-title-main" >
              <span class="category-title-text" v-if="!item.edit" @click.stop="onEditCategory(item, index)">{{item.title}}</span>
              <input @blur="onDoneEditCategory(item, index)" @keypress.enter="onDoneEditCategory(item, index)" class="category-title-edit" v-if="item.edit" type="text" v-model="item.title" >
            </span>
            <i @click.stop="onDelCategory(item, index)" class="remove-icon">删除</i>
          </span>
          <div class="category-time">{{item.datetime | datetime}}</div>
        </li>
      </ul>
  </div>
</template>

<script>
import db from '@/modules/common/db.js'

export default {
  name: 'CategoryList',
  // props: ['newOne'],
  data () {
    return {
      category_list: []
    }
  },
  mounted () {
    let ls = db.get('category_list', [])
    for (let i in ls) {
      ls[i].edit = false
    }
    this.category_list = ls
    if (this.category_list.length > 0) {
      this.onOpenCategory(this.category_list[0])
    } else {
      this.todo_list = []
    }
  },
  methods: {
    onDoneEditCategory: function (c, i) {
      c.edit = false
      db.set('category_list', this.category_list)
    },
    onEditCategory: function (c, i) {
      c.edit = true
    },
    onDelCategory: function (c, i) {
      let td = db.get('todo_list#' + c.id, [])
      if (td && td.length > 0) {
        return alert('此分类下面含有子计划')
      }
      this.category_list.splice(i, 1)
      db.set('category_list', this.category_list)
    },
    onNewCategory: function () {
      let c = {
        id: Date.now(),
        title: '新的分类',
        datetime: Date.now()
      }
      this.category_list.push(c)
      db.set('category_list', this.category_list)
    },
    onOpenCategory: function (c) {
      this.$emit('open', c)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.category-list {
  font-size: 16px;
  font-weight: bold;
  padding: 8px;
}

.category-list li {
  text-align: left;
  border-radius: 8px;
  border: 1px solid #EEE;
  padding: 8px 10px;
  background: #FFF;
  margin: 5px auto;
}
.category-list li:hover {
  background: #FAFAFA;
  cursor: pointer;
}

.category-time {
  font-size: 12px;
  font-weight: normal;
  color: #AAA;
}

.category-title {
  display: flex;
}

.category-title-main {
  flex: 1
}

.category-title-edit {
  font-size: 16px;
  border:0;
  background: transparent;
  width: 180px;
}

.remove-icon {
  font-style: normal;
  color: red;
  font-size: 14px;
  font-weight: 100;
}
.remove-icon:hover {
  text-decoration: underline;
}
</style>
